<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="styles/theme-pui.css">
  <!-- <script src="./modules/preact/dist/preact.min.umd.js"></script>
    <script src="./modules/preact/hooks/dist/hooks.umd.js"></script> -->
</head>
<style>
  .menu {
    list-style: none;
    padding: 0;
  }

  .submenu {
    margin-bottom: 10px;
  }

  button {
    background-color: #f2f2f2;
    border: none;
    padding: 10px;
    margin: 5px 0;
    cursor: pointer;
  }

  button.active {
    background-color: #e0e0e0;
  }

  .tip {
    margin-left: 5px;
    color: #888;
  }

  .submenu ul {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }

  .submenu.open ul {
    max-height: 200px;
    /* 根据实际需求设置合适的高度 */
  }
</style>
<script type="module">
  import { h, render, Component, Fragment, toChildArray } from "./lib/preact";
  import { useState, useEffect, useCallback, useContext, useRef } from "./lib/hooks";
  import classNames from './lib/classNames'
  import ClockX from './components/Test.js'
  import { Button, Menu } from './components/pui/index.js'
  import { Router, route, Link, Route, getCurrentUrl, Info } from './lib/preact-router.es.js';
  import App from './components/Apps.js'
  //const { h, render, Component } = preact;
  //const { useState, useEffect, useCallback } = preactHooks;
  JSX = h;
  const styles = {
    color: 'red',
    fontSize: '20px',
    // 其他样式属性...
  };
console.log(document,window.state)
  render(<App />, document.getElementById("app"));
</script>

<body>
  <div id="app"></div>
  <h3 class="pui-subname c-gray ffm">3.6 按钮</h3>
  <button class="btn bs btn-primary">小按钮</button>
  <button class="btn bs btn-common">小按钮</button>
  <button href="javascript:;" class="btn btn-primary"><span>普通按钮</span></button>
  <a href="javascript:;" class="btn btn-primary"><span>a普通按钮</span></a>
  <button href="javascript:;" class="btn btn-secondary">
    <i class="icon icon-addr"></i><span>图标按钮</span>
  </button>
  <a href="javascript:;" class="btn btn-secondary">
    <i class="icon icon-addr"></i><span>a图标按钮</span>
  </a>
  <input class="btn btn-red" type="button" value="Input按钮" />
  <button class="btn btn-common">无背景按钮</button>
  <button class="btn bb btn-red"><i class="icon icon-addr"></i>大按钮</button>
  <button class="btn bb btn-common">大按钮</button>
  <div class="pd10">
    <div class="btn-group clearfix"> <button>左</button><button>中</button><button>右</button> </div>
  </div>
  <div class="pd10">
    <div class="btn-group clearfix"> <button class="btn btn-blue">左</button><button
        class="btn btn-blue">中</button><button class="btn btn-blue">中</button><button
        class="btn btn-blue">中</button><button class="btn btn-blue">中</button><button class="btn btn-blue">右</button>
    </div>
  </div>
  <table class="table table-bordered table-striped table-vcenter">
    <thead>
      <tr>
        <th class="w-15">按钮</th>
        <th>class=""</th>
        <th class="w-15">按钮</th>
        <th>class=""</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><button class="btn btn-default btn-w-md" type="button">默认按钮</button></td>
        <td><code>btn btn-default</code></td>
        <td><button class="btn btn-primary btn-w-md" type="button">主要颜色按钮</button></td>
        <td><code>btn btn-primary</code></td>
      </tr>
      <tr>
        <td><button class="btn btn-success btn-w-md" type="button">绿色按钮</button></td>
        <td><code>btn btn-success</code></td>
        <td><button class="btn btn-info btn-w-md" type="button">一般信息按钮</button></td>
        <td><code>btn btn-info</code></td>
      </tr>
      <tr>
        <td><button class="btn btn-warning btn-w-md" type="button">橙色按钮</button></td>
        <td><code>btn btn-warning</code></td>
        <td><button class="btn btn-danger btn-w-md" type="button">红色按钮</button></td>
        <td><code>btn btn-danger</code></td>
      </tr>
      <tr>
        <td><button class="btn btn-secondary btn-w-md" type="button">次要颜色按钮</button></td>
        <td><code>btn btn-secondary</code></td>
        <td><button class="btn btn-dark btn-w-md" type="button">黑色按钮</button></td>
        <td><code>btn btn-dark</code></td>
      </tr>
      <tr>
        <td><button class="btn btn-purple btn-w-md" type="button">紫色按钮</button></td>
        <td><code>btn btn-purple</code></td>
        <td><button class="btn btn-pink btn-w-md" type="button">粉红色按钮</button></td>
        <td><code>btn btn-pink</code></td>
      </tr>
      <tr>
        <td><button class="btn btn-cyan btn-w-md" type="button">青色按钮</button></td>
        <td><code>btn btn-cyan</code></td>
        <td><button class="btn btn-yellow btn-w-md" type="button">黄色按钮</button></td>
        <td><code>btn btn-yellow</code></td>
      </tr>
      <tr>
        <td><button class="btn btn-brown btn-w-md" type="button">棕色按钮</button></td>
        <td><code>btn btn-brown</code></td>
        <td><button class="btn btn-link" type="button">链接形式</button></td>
        <td><code>btn btn-link</code></td>
      </tr>
    </tbody>
  </table>
</body>

</html>